Menú personalizado desde "Fuentes y colores"

Hay diferentes formas de añadir un menú en el header, claro está que no vamos a hablar de todas sino de una en concreto que Gabuleta lleva tiempo esperando.

Con la siguiente explicación conseguiremos un menú en el header y aunque a simple vista pueda parecer complicado es justamente todo lo contrario, lo que hace es simplificar el menú de forma que podemos cambiar los colores con la herramienta "Fuentes y colores"

Lo primero que haremos será eliminar la barra de navegación que nos provee Blogger más conocida como Navbar.

Buscamos ]]></b:skin> y justo antes añadimos lo siguiente.

#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}

Ahora que no tenemos barra de navegación, justo después del código anterior añadimos los estilos del menú:

.menu {

width:660px;

height:27px;

background: $menubgColor;

border: 1px solid $menumainBorderColor;

}

.menu ul{

padding:5px 0 0 10px;

margin:0px;

float:right;

list-style:none;

border-right: 1px solid $menuBorderColor;

}

.menu li{

padding:0px;

margin:0px;

float:left;

list-style:none;

line-height:32px;

}

.menu a{

float:left;

display:block;

padding:0 15px 0 15px;

color: $menuTextColor;

font: $menuTextFont;

border-left: 1px solid $menuBorderColor;

}

.menu a:hover{

color: $menuHoverTextColor;

background: $menuHoverBgColor;

}

Con width escogemos el ancho normalmente el mismo ancho que tenemos en outer-wrapper y con height le damos altura.

Si deseamos añadir una imagen de fondo en lugar de color simplemente eliminamos la línea background: $menubgColor;

y en su lugar añadimos:

background: url('url imagen');
(No intentes guardar los cambios ahora)

Como podéis ver en los estilos del menú los colores no fueron definidos con css, sino que añadimos una línea de código para que las variables hagan su función desde la herramienta fuentes y colores. Para que esas variables funcionen y poder guardar los cambios primero debemos añadirlas.

Al inicio de la plantilla veremos algo así:

Justo después de:

/* Variable definitions

====================

Añadimos las nuevas variables para el menú:

<Variable name="menubgColor" description="Color de Fondo"
type="color" default="#C94093" value="#940f04">
<Variable name="menumainBorderColor" description="Color del borde"
type="color" default="#C94093" value="#000000">
<Variable name="menuBorderColor" description="Líneas de separación"
type="color" default="#9D1961" value="#000000">
<Variable name="menuTextColor" description="Color texto"
type="color" default="#ffffff" value="#cccccc">
<Variable name="menuHoverBgColor" description="Color de fondo Hover"
type="color" default="#ffffff" value="#15222b">
<Variable name="menuHoverTextColor" description="Color texto Hover"
type="color" default="#9D1961" value="#ffffff">
<Variable name="menuTextFont" description="Tipo de fuente"
type="font"default="normal normal 77% Verdana, sans-serif" value="normal bold 95% Georgia, Times, serif">

Ahora si que podemos guardar los cambios, las variables de este ejemplo las he probado sin problemas pero si diera algún error del tipo "Declaración de variable no válida en máscara de página" comprobaremos de qué variable se trata y miraremos si al copiar y pegar no cometimos algún error.

Seguimos con nuestro menú, ya sólo queda añadir los enlaces, buscamos nuevamente en la plantilla:

<div id="header-wrapper">

y justo antes añadimos:

<div class="menu">

<ul>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href="Url de la página" title="Título">Texto</a></li>

</ul>

</div>

Una vez guardados los cambios y añadidos nuestros enlaces en plantilla de diseño veremos el menú más o menos así:

Ya podemos comprobar si los enlaces están correctos.

Para enlazar diferentes páginas como puede ser el correo, acceso al panel de Blogger o sitios externos puedes ver como hacerlo en Configurar menús.

Para añadir traductor y buscador a este menú mira la siguiente entrada.
Gracias por la paciencia Gabuleta